"use strict";
import * as React from 'react';
const { View, ScrollView, FlatList, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { commonProps, commonStyles } from "../../assets/styles/common";
import MyText from "../../component/MyText";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
import { openUrl } from "../../utils/tools";
import T from "../../utils/T";
class SupportPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.textProps = {
            color: Colors.White,
            fontSize: 25,
            style: { marginBottom: 10 }
        };
        this.renderItem = ({ item }) => {
            const questionType = item;
            return (<TouchableOpacity onPress={Actions.supportReport.bind(null, { supportItem: item })}>
                <View style={[commonStyles.flexRow, commonStyles.listItem, {
                    backgroundColor: Colors.White,
                    justifyContent: 'space-between',
                    padding: 15
                }]}>
                    <MyText color={Colors.Brief}>{item.name}</MyText>
                    
                    <MyIcon name={'icon-iconfontyoujiantou'} color={Colors.Active}/>
                </View>
                <Line color={Colors.Background}/>
            </TouchableOpacity>);
        };
        this.renderListFooterComponent = () => {
            return (<View style={{ backgroundColor: Colors.Clear }}>
                <TouchableOpacity style={[commonStyles.centerVH, { padding: 15 }]}>
                    <MyText>{T('Need help now') + '?'}</MyText>
                </TouchableOpacity>
                <View style={[{ paddingLeft: 15, paddingRight: 15, paddingBottom: 15 }]}>
                    <TouchableOpacity onPress={openUrl.bind(null, 'tel:123456', false)}>
                        <View style={[commonStyles.centerVH, { backgroundColor: Colors.Active, paddingVertical: 15 }]}>
                            <MyText color={Colors.White}>{T('Call us right away')}</MyText>
                        </View>
                    </TouchableOpacity>
                </View>
                <Line color={Colors.Background}/>
            </View>);
        };
        this.renderListHeaderComponent = () => {
            return (<View style={[commonStyles.relative, { padding: 15, backgroundColor: Colors.White }]}>
                <MyText color={Colors.Title}>我们可以提供什么帮助?</MyText>
                <Line color={Colors.Background} style={[commonStyles.absolute, { bottom: 0 }]}/>
            </View>);
        };
        this.renderListEmptyComponent = () => {
            return (<View style={[commonStyles.centerVH, { padding: 20 }]}>
                <MyText fontSize={16} color={Colors.Title}>暂无数据</MyText>
            </View>);
        };
        this.state = {
            firstName: null,
            lastName: null,
            date: new Date()
        };
    }
    componentDidMount() {
        this.props.dispatch({ type: 'place/fetchQuestionTypeList' });
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} title={{ title: '支持', tintColor: '#fff' }}/>
                <View style={commonStyles.flex1}>
                    <FlatList data={this.props.place.questionTypeList ? this.props.place.questionTypeList.content : []} extraData={this.state} keyExtractor={item => item.id} renderItem={this.renderItem} ListEmptyComponent={this.renderListEmptyComponent} ListHeaderComponent={this.renderListHeaderComponent} ListFooterComponent={this.renderListFooterComponent}/>
                </View>
            </View>);
    }
}
export default connect(({ auth, place }) => ({ auth, place }))(SupportPage);
